<!-- 网页端 websocket 网页客户端 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Websockets Example</title>
  </head>
  <body>
    <input id="message-input" type="text" placeholder="please input a message">
    <button id="send-button">发送</button>
    <ul id="message-list"></ul>
    <script>
      const socket = new WebSocket('ws://localhost:9999/api/ws/test');
      socket.addEventListener('message', event => {
        const li = document.createElement('li');
        li.textContent = event.data;
        document.querySelector('#message-list').appendChild(li);
      });

      let YOUR_TOKEN = "1002"
      socket.addEventListener('open', (event) => {
        socket.send('Authorization: Bearer' + YOUR_TOKEN);
      });

      document.querySelector('#send-button').addEventListener('click', () => {
        const input = document.querySelector('#message-input');
        const value = input.value.trim();
        if (value) {
          socket.send(value);
          input.value = '';
        }
      });
    </script>
  </body>
</html>